<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList='swiperList'></home-swiper>
    <home-nav :icons='icon'></home-nav>
    <home-recommend :recommend='recommendList'></home-recommend>
    <home-weekend :weekendList='weekendList'></home-weekend>
  </div>
</template>
<script>
import HomeHeader from './pages/homeHeader'
import HomeSwiper from './pages/swiper.vue'
import HomeNav from './pages/nav.vue'
import HomeRecommend from './pages/recommend.vue'
import HomeWeekend from './pages/weekend.vue'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeNav,
    HomeRecommend,
    HomeWeekend
  },
  data(){
      return {
          lastCity:'',
          swiperList:[],
          icon:[],
          recommendList:[],
          weekendList:[]
      }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted(){
      this.getHomeInfo()
      this.getHeaderInfo()
  },
  methods:{
      getHomeInfo(){
          axios.get('/api/index.json?city=' + this.city)
          .then((res) => {
              if(res.data.ret){
                this.swiperList = res.data.data.swiperList
                this.icon = res.data.data.iconList
                this.recommendList = res.data.data.recommendList
                this.weekendList = res.data.data.weekendList
              }
          })
      },
      getHeaderInfo(){
        axios.get('/api/city.json')
        .then((res) => {
          if(res.data.ret){
            this.city = res.data.data.cities.A[1].name
          }
        })
      }
  },
   activated(){//使用keep-alive会生成这个勾子函数，重新显示时调用
      if(this.lastCity !== this.city){
        this.lastCity = this.city;
        this.getHomeInfo();
      }
  }
}
</script>
